<template>
  <view class="order-goods-list">
    <view class="x-order-goods" @click="onDetail">
      <view class="_pic">
        <x-image :src="goodsDetail.productImgUrl" />
      </view>
      <view class="_info">
        <view class="_title">{{ goodsDetail.productName }}</view>
        <view class="_desc">
          <view class="_sku" v-if="goodsDetail.productSku"><text v-if="goodsDetail.comboName">套餐:{{goodsDetail.comboName}}</text>{{ goodsDetail.productSku.join() }}</view>
        </view>
        <view class="_tips" v-for="(item,index) in detail.tips" :key="index">特价商品</view>
        <view class="_bottom">
          <view class="_red flex1">
            <text class="_text">¥</text>
            <text class="_text-blod">{{ goodsDetail.productPrice }}</text>
          </view>
          <view class="_num">
            x{{ goodsDetail.productCount ? goodsDetail.productCount : 1 }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';

export default {
  name: 'XOrderGoods',
  components: {
    XImage
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    },
    link: {
      type: Boolean,
      default: false
    },
    refund: {
      type: Boolean,
      default: false
    },
    isCanBuy: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      goodsDetail: this.detail
    };
  },
  computed: {

  },
  watch: {},
  created() {

  },
  methods: {
    // 跳转到商品详情
    onDetail() {
      if (!this.link) return;
      // productType:3-小程序投放；4-小程序自营
      if (this.detail.productType === 3) {
        uni.navigateTo({
          url: `/pages/advertising/index?pageId=${this.detail.productId}`
        });
      } else {
        uni.navigateTo({
          url: `/pages/detail/index?sku=${this.detail.productId}`
        });
      }
    }
  }
};
</script>

<style lang="scss">
.order-goods-list{
  .x-order-goods{
    display: flex; padding: 16px 24px;border-bottom: 1px solid #F7F8FA;background: #FFFFFF;
    ._pic{ width: 180px; height: 180px; background-color: #FFECEC; border-radius: 10px; overflow: hidden;}
    ._info{
      flex: 1; padding-left: 12px;position: relative;
      ._title{ font-size: 28px; color: $uni-color-default;  overflow: hidden; height: 40px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
      ._desc{
        display: flex; align-items: center; margin-bottom: 6px; font-size: 24px; color: #A3A3A3;
        ._sku{ flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
      }
      ._tips{
        display: inline-block;
        min-width: 100px;
        height: 32px;
        line-height: 32px;
        background: rgba(235, 68, 31, 0.1);
        font-size: 20px;
        color: $uni-color-primary;
        text-align: center;
        padding: 0 8px;
        margin-right: 8px;
      }
      ._text{
        font-size: 24px;
      }
      ._text-blod{
        font-size: 32px;
        font-weight: bold;
      }
      ._bottom{
        position: absolute;bottom: 0;display: flex;align-items: baseline;width: 100%;
        ._num{
          font-size: 24px;color: $uni-color-secondary;
        }
      }
    }
  }
}
.flex{
  display: flex;
}
.flex1{
  flex: 1;
}
.align-center{
  align-items: center;
}
._red{
  color: $uni-color-primary;
}
._px24{
  font-size: 24px;
}
._px32{
  font-size: 32px;
}
._px36{
  font-size: 36px;
}
</style>
